<script setup lang="ts">
  import { useChannelStore } from '@/store/channel'
  import { computed } from 'vue'
  const userInfo = useChannelStore()
  const avatar = computed(() => {
    return userInfo.SystemInfo.visitorAvatar
  })
  const props = defineProps({
    message: {
      type: Object,
      default: () => ({}),
    },
  })
</script>

<template>
  <div
    class="w-full h-auto pr-3 pl-14 box-border mt-3 flex flex-row-reverse justify-end"
  >
    <div class="avatar">
      <img class="rounded-md w-10 h-10 mt-1" :src="avatar" alt="" />
    </div>
    <div
      class="content flex-1 w-full h-auto pr-2 mr-1 flex flex-col justify-end items-end"
    >
      <!-- 消息体 -->
      <div
        class="bg-[#48a3ff] text-white rounded-lg px-3 py-1 inline-block relative mt-[3px] break-all"
      >
        <i
          class="iconfont icon-strange arrow-icon rotate-0 text-[#48a3ff] absolute -right-[11px] top-1"
        ></i>
        <div v-if="props.message.state === '@imCloud_subject_message_user@'">
          <div v-html="props.message.content"></div>
        </div>
        <template v-else>
          <div v-html="props.message.content"></div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
